<template>
  <div class="location">
    <zy-model :show="isShow" type="table" @close="close" @submit="submit">
      <div class="" v-loading="loading">
        <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom='true' @click="mapClick"
                   @ready="handler">
          <!--        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
          <bml-marker-clusterer :averageCenter="true">
            <bm-marker :dragging="true" @dragend="mapClick" :position="{lng: markerData.lng, lat: markerData.lat}"
                       animation="BMAP_ANIMATION_BOUNCE">
              <bm-info-window :show="showInfo">
                <div class="">{{address}}</div>
              </bm-info-window>
            </bm-marker>
          </bml-marker-clusterer>
          <bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
          <bm-control :offset="{width: '10px', height: '10px'}">
            <bm-auto-complete v-model="keyword" @confirm="confirm"
                              :sugStyle="{zIndex: 9999}">
              <zy-input v-model="keyword" placeholder="请输入地名关键字"></zy-input>
            </bm-auto-complete>
          </bm-control>
          <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false"></bm-local-search>
        </baidu-map>
      </div>
    </zy-model>
  </div>
</template>

<script>
	import {BmlMarkerClusterer} from 'vue-baidu-map'

	export default {
		name: "location",
		props: {
			isShow: {
				type: Boolean,
				default: () => false
			},
			marker: {
				type: Object,
				default: () => {

				}
			}
		},
		data() {
			return {
				loading: false,
				center: {lng: 0, lat: 0},
				zoom: 15,
				markerData: {lng: 0, lat: 0},
				showInfo: false,
				address: '',
				addressComponents: {
					city: "",
					district: "",
					province: "",
					street: "",
					streetNumber: "",
				},
				longitude: '',
				keyword: ''
			};
		},
		computed: {},
		watch: {
			marker: {
				handler(newVal) {
					console.log(newVal)
					this.markerData = {
						lng: newVal.lng || '0',
						lat: newVal.lat || '0',
					}
					this.center = {
						lng: newVal.lng || '0',
						lat: newVal.lat || '0',
					}
				},
				deep: true
			}
		},
		components: {BmlMarkerClusterer},
		methods: {
			handler() {
				if (!this.marker.lng && !this.marker.lat) {
					this.loading = true;
					var geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition((e) => {
						console.log(e)
						this.center = {lng: e.longitude, lat: e.latitude}; // 设置center属性值
						const geoCoder = new BMap.Geocoder();
						geoCoder.getLocation(e.point, (res) => {
							this.address = res.address;
							this.addressComponents = {
								...res.addressComponents,
								address: res.address,
								lat: res.point.lat,
								lng: res.point.lng
							};
							this.markerData = e.point;
							this.longitude = `${res.point.lat},${res.point.lng}`;
						});
						this.loading = false
					})
				}
			},
			mapClick(e) {
				const geoCoder = new BMap.Geocoder();
				geoCoder.getLocation(e.point, (res) => {
					console.log(res)
					this.address = res.address;
					this.addressComponents = {
						...res.addressComponents,
						address: res.address,
						lat: res.point.lat,
						lng: res.point.lng
					};
					this.longitude = `${res.point.lat},${res.point.lng}`;
					this.markerData = e.point;
				});
			},
			close() {
				this.$emit('close')
			},
			submit() {
				console.log(this.addressComponents)
				this.$emit('submit', {
					...this.addressComponents,
				})
			},
			confirm(info) {
				this.markerData = {
					lat: info.target.map.re.lat,
					lng: info.target.map.re.lng
				};
				this.address = info.item.value.business;
				this.addressComponents = {
					city: info.item.value.city,
					district: info.item.value.district,
					province: info.item.value.province || info.target.ej,
					street: info.item.value.street,
					streetNumber: info.item.value.streetNumber,
					address: info.item.value.business,
					lat: info.target.map.re.lat,
					lng: info.target.map.re.lng
				};
			},
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  .bm-view {
    padding: 0 24px;
    width: 100%;
    height: 450px;
    margin-bottom: 20px;
  }
</style>
